<template>
  <div>
    <el-card style="margin: 20px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">教育培训</a></el-breadcrumb-item>
        <el-breadcrumb-item>XX县第一中学</el-breadcrumb-item>
        <el-breadcrumb-item>教育培训项目</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>

    <el-card style="margin: 20px;">
      <el-button type="primary">新增计划</el-button>

    </el-card>
    <el-row :gutter="20">

      <el-col :span="6">
        <div style="margin-left: 20px;margin: 20px;">
          <el-table :data="tableData1" style="width: 100%">
            <el-table-column prop="date" label="年度" width="180"> </el-table-column>

            <!-- <el-table-column prop="name" label="名称" width="180"> </el-table-column> -->

            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>

            <el-table-column prop="materials" label="分管副校长审批">

              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>


            </el-table-column>


            <el-table-column prop="materials" label="校长审批">
              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>


            </el-table-column>
          </el-table>


        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">

          <div style="margin: 30px;">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="id" label="序号" width="80"></el-table-column>
              <el-table-column prop="date" label="日期" width="100"></el-table-column>
              <el-table-column prop="topic" label="培训主题" width="150"></el-table-column>
              <el-table-column prop="content" label="主要内容" width="180"></el-table-column>
              <el-table-column prop="form" label="培训形式" width="150"></el-table-column>
              <el-table-column prop="target" label="培训对象" width="180"></el-table-column>
              <el-table-column prop="lecturer" label="主讲" width="100"></el-table-column>
              <el-table-column prop="assessment" label="考核形式" width="100"></el-table-column>
              <el-table-column prop="location" label="培训地点" width="120"></el-table-column>
              <el-table-column prop="materials" label="教材"></el-table-column>

              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div style="margin: 20px auto;margin-left: 400px;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
              </el-pagination>
            </div>
          </div>


        </div>
      </el-col>

    </el-row>


    <el-drawer title="2025年1月份消防安全及应急预案进度" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <div class="block">
        <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/12 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/3 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>


  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      tableData1: [{
        date: '2025年安全培训教育计划',
        // name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2024年安全培训教育计划',
        // name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2023年安全培训教育计划',
        // name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2022年安全培训教育计划',
        // name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableData: [{
        id: 1,
        date: '待定',
        topic: '待定',
        content: '待定',
        form: '待定',
        target: '待定',
        lecturer: '待定',
        assessment: '待定',
        location: '待定',
        materials: '待定'
      }, {
        id: 2,
        date: '4月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 3,
        date: '5月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 4,
        date: '6月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 5,
        date: '3月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 5,
        date: '3月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 5,
        date: '3月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 6,
        date: '3月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 7,
        date: '3月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
        , {
        id: 8,
        date: '3月5日',
        topic: '消防安全及应急预案',
        content: '火灾预防与灭火器使用方法',
        form: '现场演示与讲解',
        target: '全体教职工、安保人员',
        lecturer: '待定',
        assessment: '笔试',
        location: '二楼会议室',
        materials: '灭火器使用方法及应急预案文本'
      }
      ]
    }
  },
  methods: {
    handleClick() {
      this.drawer = true
    }
  }
}
</script>

<style>
.el-table {
  margin-top: 20px;
}
</style>